<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
</head>
<body>


<div id="app">
    <h1>{{title}}</h1>
    <button  @click="randomTitle()">改变</button>
    <button  @click="destroyVm()">销毁</button>
</div>

    <script language="javaScript" src="../JS文件/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return{
                    title:'hello world'
                }
            },
            methods:{
                randomTitle(){
                    this.title = 'hello'+['china','world','universe'][Math.floor(Math.random()*2.999)]
                },
                destroyVm(){
                    this.$destroy()
                }
            },
            // 实例初始化之后，数据观测和事件绑定之前
            beforeCreate() {
                console.log('before create  实例初始化之后，数据观测和事件绑定之前')
            },
            // 实例初始化完成，挂载尚未开始时
            created() {
                console.log('created   实例初始化完成，挂载尚未开始时')
            },
            // 挂载之前，render函数首次被调用时
            beforeMount() {
                console.log('before mount   挂载之前，render函数首次被调用时')
            },
            // 在实例挂载到dom节点上之后
            mounted() {
                console.log('mounted    在实例挂载到dom节点上之后')
            },
              // 数据更新时，在虚拟dom状态变化之前
            beforeUpdate() {
                console.log('before update    数据更新时，在虚拟dom状态变化之前')
            },
            // 虚拟dom被重新渲染之后
            updated() {
                console.log('updated   虚拟dom被重新渲染之后')
            },
            // 实例销毁之前，此时实例依然可用
            beforeDestroy() {
                console.log('brfore destory   实例销毁之前，此时实例依然可用')
            },
            // 实例销毁后，此时Vue实例及其子实例将完全解绑
            destroyed() {
                console.log('destoryed   实例销毁后，此时Vue实例及其子实例将完全解绑')
            }
        })
    </script>
</body>
</html>